<template>
    <div class="totalContent">
        <div class="top" style="display: flex;
        justify-content: space-between; align-items: center;
        ">
            <div class="topLeft" style="height: 100%; padding:0 10px 0 10px; 
            display: flex;
            align-items: center;">
                <el-image  style="height:100%" src="../../../public/FB_text.jpg"></el-image>
                <span>|</span>
                <span>未来蜂账号</span>
            </div>
            <div class="topRight" style="height:100%;
            width: 30%;
            display: flex;
            align-items: center;">
                {{ nickname }}
                <span>|</span>
                <a href="" ><span>退出</span></a> 
            </div>
        </div>     
        <div class="content" style="display: flex;">
            <div class="contentLeft">
              
                <div style="display: flex;
                flex-direction: column;
                height: 100%;">
                    <div style="display: flex;
                flex-direction: column; flex: 3;">
                        <div class="s1">
                            <el-image style="width: 72px;height:72px;" :src="avatar"></el-image>
                        </div>
                        <div class="s1">
                            {{ nickname }}
                        </div>
                        <div class="s1">
                            <div style="display: flex;">
                                <span>
                                    账号 :
                                </span>
                                <span style="padding-left: 10px;">
                                    {{ phone }}
                                </span>
                            </div>
                        </div> 
                    </div>
                  
                    
                    <div style="flex:7;">
                        
                        <ul style="width: 100%; display: flex;
                        flex-direction: column;
                        justify-content: space-evenly;">
                                <li style="width: 100%;">
                                    <el-button style="width: 100%;">
                                        个人信息
                                    </el-button>
                                </li>
                                <li style="width: 100%;">
                                    <el-button style="width: 100%;">
                                        账号安全
                                    </el-button>
                                </li>
                                <li style="width: 100%;">
                                    <el-button style="width: 100%;">
                                        实名认证
                                    </el-button>
                                </li>
                                <li style="width: 100%;">
                                    <el-button style="width: 100%;">
                                        隐私中心
                                    </el-button>
                                </li>
                                <li style="width: 100%;">
                                    <el-button style="width: 100%;">
                                        付款与账单
                                    </el-button>
                                </li>
                        </ul>
                    </div>
                    
                </div>
                
            </div>
            <div class="contentRight" style="display: flex;
            flex-direction: column;
            ">
                <div style="display: flex;" >
                    <span style="flex: 3; padding-left:30px">昵称 ：</span>
                    <el-input v-model="nickname"  style="flex: 7; padding-right:30px"></el-input>
                </div>
                <div style="display: flex;" >
                    <span style="flex: 3; padding-left:30px">姓名 ：</span>
                     <el-input v-model="name"  style="flex: 7; padding-right:30px" placeholder="请填写姓名"></el-input>
                </div>
                <div style="display: flex;" >
                    <span style="flex: 3; padding-left:30px">邮箱 ：</span>
                     <el-input v-model="email"  style="flex: 7; padding-right:30px"></el-input>
                </div>
                <div style="display: flex;" >
                    <span style="flex: 3; padding-left:30px">手机号 ：</span>
                     <el-input v-model="phone"  style="flex: 7; padding-right:30px" placeholder="请填写手机号"></el-input>
                </div>
                <el-form>
                    <el-form-item label="收货地址 : " style="width: 90%" prop="address">
                    
                    <el-cascader style="width: 666px" v-model="address" :options="pcaTextArr" size="middle"></el-cascader>
                    </el-form-item>
                </el-form>
                
                <div style="display: flex;">
                    <span style="flex: 3; padding-left:30px">生日 ：</span>
                    <el-date-picker
                        v-model="birthday"
                        type="date"
                        placeholder="请选择生日"
                        style="flex: 7; padding-right:30px">
                    </el-date-picker>
                </div>
               
                 <!-- 头像 -->
                  <el-button @click="wangjiaoquan">提交</el-button>
            </div>
        </div>    
        <div class="bottom">

        </div> 
    </div>

    
</template>
<script setup>
import {ref } from 'vue'

import { pcaTextArr } from "element-china-area-data";
let email = ref ('2812194727@qq.com')

let avatar = ref('https://ts1.cn.mm.bing.net/th/id/R-C.0cdcfe3753c0020563ab36e76061e152?rik=Gp5POEoKuvIBIQ&riu=http%3a%2f%2fimg.51miz.com%2fElement%2f00%2f78%2f93%2f64%2f67b2bf18_E789364_1f9c0297.png!%2fquality%2f90%2funsharp%2ftrue%2fcompress%2ftrue%2fformat%2fpng%2ffh%2f630&ehk=jpVpc7cXzAag1xpnYr6ThhF1gG9cA7N9%2fXBrZOczQ5c%3d&risl=&pid=ImgRaw&r=0')
let nickname = ref('886085405未来蜂用户')
let name = ref('')
let phone = ref()
let address = ref ([])
let birthday = ref ()


const wangjiaoquan =()=>{
    console.dir(nickname)
    console.dir(name)
    console.dir(phone)
    console.dir(address)
    console.dir(birthday)
}

</script>
<style scoped lang="scss">
*{
    border:0px;
    padding:0px;
    box-sizing:border-box;
}
a {
  text-decoration: none; /* 去掉下划线 */
  color: inherit; /* 继承父元素的字体颜色 */
  background: none; /* 去掉背景颜色 */
  border: none; /* 去掉边框 */
}
ul{
    list-style: none;

    li{

    }
}
.totalContent{
    width: 80%;
    height:100%;
    margin:0 10% 0 10%;
    .top{
    height:48px;
    border: 0.667px black solid;
        span{
            margin-left:20px;
        }
    }
    .content{
        height:620px;
        width: 100%;
        padding-top:50px;
        border: 0.667px black solid;
        .contentLeft{
            height: 500px;
            width: 20%;
            border:0.667px black solid;
            .s1{
                width:100%;
                height: auto;                
                display: flex;
                justify-content: center;
                margin-top:10px;
            }
        }
        .contentRight{
            height: 500px;
            width: 60%;
            margin-left: 100px;
            border:0.667px black solid;
        }
        
    }
    .bottom{
        height:113px;
        width: 100%;
        margin-top:50px;
        border: 0.667px black solid;
    }

}

</style>